<template>
  <div>
      关于我
      <hr>
      <ul id="nav-box">
          
        <!-- router-link中嵌套a元素，路由地址会被渲染到a元素的href中 -->
        <router-link :to="{name: 'about'}" tag="li">
            <a>study</a>
        </router-link>
        <router-link :to="{name: 'work'}" tag="li">
            <a>work</a>
        </router-link>
        <router-link :to="{name: 'hobby'}" tag="li">
            <a>hobby</a>
        </router-link>

      </ul>

      <hr>
      <span>
          测试数据：{{test}}
      </span> 

      <router-view></router-view>

  </div>
</template>

<script>
export default {
    name: 'about',
    data(){
        return {
            test: '改变前'
        }
    },

    // 你会看到beforeRouteEnter是在beforeCreate之前触发的
    
    // Vue实例的钩子函数
    // 在组件被创建前触发
    beforeCreate () {
        console.log("beforeCreate组件创建之前");
    },
    
    // 组件内的路由钩子函数
    // beforeRouteEnter在Vue实例还未创建时触发
    beforeRouteEnter(to, from, next){
        console.log("beforeRouteEnter路由进入组件之前");
        // 但是我们可以在next中写一个回调函数，接受一个参数vm,vm就是组件的实例(实际上就是平时在Vue实例中写的this)
        next((vm) => {
            setTimeout(() => {
                vm.test = '我在组件实例创建后被改变了::>_<::'
            },1500)
        });
    },

    // 组件内更新路由时触发
    beforeRouteUpdate(to, from, next){
        console.log('beforeRouteUpdate，组件内路由更新啦～～～');
        next();
    },

    // 路由离开时触发
    beforeRouteLeave(to, from, next){
        console.log('我离开about的路由啦O(∩_∩)O！！！！');
        next();
    }
}
</script>

<style>

</style>


